<template>
	<view class="container tc">
		<image class="logo" src="../../static/login/logo.png"></image>
		<text class="title">悟空淘助手</text>
		<!-- 输入框 -->
		<input class="phone" type="number" maxlength="11" placeholder="请输入手机号" v-model="phone">
		<view class="code">
			<input type="number" maxlength="6" placeholder="请输入短信验证码" v-model="code">
			<view class="get" @click="openSvg">
				{{isSend ? time : '获取验证码'}}
			</view>
		</view>
		<input class="password" type="password" placeholder="请输入新密码" v-model="newPass">
		<!-- 登录按钮 -->
		<view class="btn" @click="reSet">重置密码</view>
		<view class="tip" @click="toPath('login')">切换登录</view>
		<!-- 图形验证码弹窗 -->
		<van-dialog class="custom-button" use-slot title="图片验证码" :show="svgShow" @confirm="submit">
			<input type="text" placeholder="请输入图形验证码" v-model="svgCode">
			<image :src="svgUrl"></image>
		</van-dialog>
	</view>
</template>

<script>
	import {tip} from '@/utils/tip'
	export default {
		data() {
			return {
				phone: '',
				code: '',
				newPass: '',
				svgShow: false,
				svgCode: '',
				svgUrl: '',
				time: 60,
				isSend: false, //是否发送验证码
				timer: null
			}
		},
		onLoad() {
		},
		methods: {
			toPath(val) {
				uni.navigateTo({
					url: `/pages/common/${val}`
				})
			},
			openSvg() {
				if (this.isSend) return
				if (!this.phoneValid()) return
				this.svgShow = true
				this.getSvg()
			},
			// 获取图形
			getSvg() {
				let params = {
					type: 'base64'
				}
				this.$service.common.getSvg(params).then((res) => {
					this.svgUrl = res.data
					this.captchaId = res.captchaId
				}).catch((err) => {

				})
			},
			// 验证码倒计时
			timeDown() {
				this.isSend = true
				this.timer = setInterval(() => {
					this.time--
					if (this.time <= 0) {
						clearInterval(this.timer)
						this.time = 60
						this.isSend = false
					}
				}, 1000)
			},

			// 提交图形验证码
			submit() {
				if (!this.svgCode) {
					tip({
						title: '图形验证码不能为空'
					})
					return
				}
				this.getCode()
			},
			// 获取短信验证码
			getCode() {
				let params = {
					phone: this.phone,
					captchaId: this.captchaId,
					verifyCode: this.svgCode
				}
				this.$service.common.getCode(params).then(() => {
					this.timeDown()
				}).catch((err) => {
					uni.showToast({
						title: '图形' + err,
						icon: 'none'
					})
				})
				this.svgCode = '' //清空
				this.svgUrl = ''
				this.svgShow = false // 弹窗关闭
			},
			// 重置密码
			reSet() {
				if (!this.valid()) return
				let params = {
					phone: this.phone,
					password: this.newPass,
					code: this.code
				}
				this.$service.common.modifyPwdByPhone(params).then(async (res) => {
					await tip({ title: '修改成功，请重新登录'})
					uni.redirectTo({
					    url: '/pages/common/login'
					});
				}).catch((err) => {
					tip({ title: err})
				})
			},
			phoneValid() {
				if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
					if (!this.phone) {
						tip({
							title: '手机号码不能为空'
						})
					} else {
						tip({
							title: '手机号码有误，请重填'
						})
					}
					return false;
				} else {
					return true
				}
			},
			valid() {
				if (!this.phone) {
					return tip({
						title: '手机号码不能为空'
					})
				}
				if (!this.code) {
					return tip({
						title: '短信验证码不能为空'
					})
				}
				if (!this.newPass) {
					return tip({
						title: '新密码不能为空'
					})
				}
				return true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		widht: 100vw;
		height: 100vh;
		background-color: white;
		padding-top: 142rpx;

		.logo {
			width: 240rpx;
			height: 240rpx;
			display: block;
			margin: 0 auto;
		}

		text {
			display: block;
		}

		.title {
			font-size: 48rpx;
			color: $main-color;
			font-weight: bold;
			// margin-top: 38rpx;
		}

		input {
			width: 500rpx;
			margin: 0 auto;
			border-bottom: 2rpx solid #F2F2F2;
			font-size: 24rpx;
			text-align: left;
			padding-bottom: 12rpx;
		}

		.phone {
			margin-top: 118rpx;
		}

		.code {
			position: relative;
			width: 500rpx;
			margin: 0 auto;
			margin-top: 52rpx;

			.get {
				position: absolute;
				right: 0;
				bottom: 20rpx;
				color: $main-color;
				font-size: 24rpx;
				z-index: 999;
			}

		}

		.password {
			margin-top: 52rpx;
		}

		.btn {
			width: 342rpx;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 42rpx;
			text-align: center;
			font-size: 28rpx;
			color: white;
			background-color: $main-color;
			margin: 0 auto;
			margin-top: 94rpx;
		}

		.tip {
			margin-top: 40rpx;
			color: #169AFF;
		}
		/deep/ .custom-button {
			input {
				width: 70%;
				margin: 0 auto;
				margin-top: 30rpx;
			}
		
			image {
				margin-top: 20rpx;
				display: block;
				width: 180rpx;
				height: 90rpx;
				margin: 30rpx auto;
			}
		}
	}
</style>
